<template>
  <div>
    <el-form
             label-width="100px" class="demo-ruleForm">
      <div>
        <el-row :gutter="20"><el-col :span="6"><div class="grid-content bg-purple"><el-form-item label="姓名" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
              </el-form-item>
            </div>
          </el-col><el-col :span="6"><div class="grid-content bg-purple"><el-form-item label="电话号码" prop="name">
                <el-input v-model="ruleForm.phone"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6"><div class="grid-content bg-purple"><el-form-item label="身份证号" prop="name">
                <el-input v-model="ruleForm.cardNumber"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="6"><div class="grid-content bg-purple"><el-form-item label="入住天数" prop="name"><el-input v-model="ruleForm.days"></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
      </div>

      <el-form-item label="性别" prop="gender"><el-select v-model="ruleForm.gender" placeholder="请选择性别">
          <el-option label="男" value="男"></el-option>
          <el-option label="女" value="女"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <el-form
        label-width="100px" class="demo-ruleForm">
      <div>
        <el-row :gutter="20"><el-col :span="6"><div class="grid-content bg-purple"><el-form-item label="姓名" prop="name">
          <el-input v-model="ruleForm.otherName"></el-input>
        </el-form-item>
        </div>
        </el-col><el-col :span="6"><div class="grid-content bg-purple"><el-form-item label="电话号码" prop="name">
          <el-input v-model="ruleForm.otherPhone"></el-input>
        </el-form-item>
        </div>
        </el-col>
          <el-col :span="6"><div class="grid-content bg-purple"><el-form-item label="身份证号" prop="name">
            <el-input v-model="ruleForm.otherCardNumber"></el-input>
          </el-form-item>
          </div>
          </el-col>
        </el-row>
      </div>

      <el-form-item label="性别" prop="otherGender"><el-select v-model="ruleForm.otherGender" placeholder="请选择性别">
        <el-option label="男" value="男"></el-option>
        <el-option label="女" value="女"></el-option>
      </el-select>
      </el-form-item>
    </el-form>
      <div>
        <el-form>
          <el-form-item label-width="100px">
            <el-button type="primary" @click="submitForm()">生成订单</el-button>
            <el-button @click="resetForm()">重置</el-button>
          </el-form-item>
        </el-form>
       </div>

   </div>



</template>

<script>

export default {
  name: "GenerateOrder",
  data() {
    return {
      ruleForm: {
        roomType:'',
        roomId: "",
        price:'',
        days:'',
        phone:'',
        cardNumber: '',
        name: '',
        gender: '',
        otherName:'',
        otherPhone:'',
        otherCardNumber:'',
        otherGender:''
      },
      room:{  enable:1,
        disable:0,},
      type: [],
      flag: true,
      rules: {
        phone: [
          {required: true, message: '请输入电话', trigger: 'blur'},
          {min: 5, max: 15, message: '长度在 5 到 15 个字符', trigger: 'blur'}
        ],
        cardNumber: [
          {required: true, message: '请输入身份证', trigger: 'blur'},
          {min: 10, max: 30, message: '长度在 10 到 30 个字符', trigger: 'blur'}
        ],
        name: [
          {required: true, message: '请输入姓名', trigger: 'blur'},
          {min: 1, max: 5, message: '长度在 1 到 5 个字符', trigger: 'blur'}
        ],
        gender: [
          {required: true, message: '请选择时间', trigger: 'change'}
        ],
        type: [
          {type: 'array', required: true, message: '请至少选择一个房间类型', trigger: 'change'}
        ],
      }
    };
  },

  methods: {
    submitForm(){
          let url ='http://localhost:9085/orders/make-New';
          let formData = this.qs.stringify(this.ruleForm)
          this.axios.create({'headers': {'Authorization': localStorage.getItem('jwt')}})
              .post(url,formData).then((response)=>{
            console.log(response);
            if(response.data.state==20000){
              this.$message({
                showClose: true,
                message: '新增订单成功',
                type: 'success'
              });
              this.updateEnable({id:this.ruleForm.roomId,enable: 0});
              this.resetForm();
              this.$router.push("/ol");
            }else if(response.data.state==40900){
              this.$message({
                showClose: true,
                message: response.data.message,
                type: 'error'
              });
            }
          });
    },
    // 表单添加一行
    add() {
      var arr = {name: '', sex: '', memo: ''}
      this.ruleForm.push(arr)
      this.flags()
    },
    // 表单减少一行
    reduce() {
      this.ruleForm.length = this.ruleForm.length - 1
      this.flags()
    },
    // 判断数组长度
    flags() {
      if (this.ruleForm.length < 2) {
        this.flag = true
      } else {
        //先赋值为true再赋为false, 不然会没反应
        this.flag = true
        this.flag = false
      }
    },
    // 重置方法
    resetForm() {
      this.ruleForm = [{}]
    },
    getRoomId() {
      this.ruleForm.roomId = this.$route.query.roomId;
      this.ruleForm.price = this.$route.query.price;
      this.ruleForm.roomType = this.$route.query.type;
    },
    updateEnable(room) {
      let enableStatus = [
        {'url': '/disable', text: '禁用'},
        {'url': '/enable', text: '启用'}
      ];
      let url = 'http://localhost:9085/rooms/'
          + room.id + enableStatus[room.enable].url;
      console.log('url = ' + url);

      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .post(url).then((response) => {
        let responseBody = response.data;
        if (responseBody.state == 20000) {
          console.log("启用房间成功")
          this.loadRoomList(this.page, this.pageSize);
        } else if (responseBody.state == 40400) {
          this.$alert(responseBody.message, '警告', {
            confirmButtonText: '确定',
            callback: action => {// eslint-disable-line no-unused-vars
              this.loadRoomList(this.page, this.pageSize);
            }
          });
        } else {
          this.$message.error(responseBody.message);
        }
      });
    },

  },
  submitForm(formName) {
    this.$refs[formName].validate((valid) => {
      if (valid) {
        alert('submit!');
      } else {
        console.log('error submit!!');
        return false;
      }
    });
  },
  resetForm(formName) {
    this.$refs[formName].resetFields();
  },
  mounted() {
    this.getRoomId()
  }
}
</script>

<style scoped>
.box-one {
  height: 800px;
  width: 1570px;
  margin-bottom: 20px;
  font-size: 25px;
  background-color: #ecf5ff;
}
</style>
